<template>
	<view class="itu-demo">
		<view class="itu-demo-wrap">
			<view class="itu-demo-title">演示效果</view>
			<view class="itu-demo-area">
				<view class="itu-demo-result-line" @click="handleShow">
					点我演示功能
				</view>
			</view>
		</view>
		<itu-captcha ref="captcha" :background-image="captchaList[current].captchaBackgroundImage" :jigsaw="captchaList[current].captchaJigsaw"
							 @info="handleInfo" @reset="handleReset" @end="handleEnd"></itu-captcha>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				captchaList: [
					{
					  captchaBackgroundImage: "",
					  captchaJigsaw: ""
					},
					{
						captchaBackgroundImage: "",
						captchaJigsaw: ""
					}
				],
				current: 0
			}
		},
		onLoad({ title }) {
			this.setNavigationBarTitle(title)
		},
		methods: {
			handleShow(){
				this.$refs.captcha.show()
				this.handleReset()
			},
			handleInfo() {
				this.$showToast("您点击了信息图标")
			},
			handleReset(){
				// 模拟请求接口获取背景图和拼图
				setTimeout(()=>{
					this.current = this.current===1 ? 0 : 1
					this.$refs.captcha.hideLoading()
				}, 1000)
			},
			handleEnd(e){
				// 模拟校验成功失败
				if(this.current==0&&(e.x>73&&e.x<83)){
					this.$refs.captcha.success()
				} else if(this.current==1&&(e.x>219&&e.x<229)){
					this.$refs.captcha.success()
				}else{
					this.$refs.captcha.error()
				}
				this.$refs.captcha.reset()
			}
		}
	}
</script>
